<ng-container>
  <button mat-icon-button [matMenuTriggerFor]="actionDropdown">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #actionDropdown="matMenu">
      <span matTooltip="{{ getEditTooltipText$() | async}}" [matTooltipDisabled]="canEditTopicDraft()">
        <button mat-menu-item [disabled]="!canEditTopicDraft()" (click)="editTopicDraft()">
          <mat-icon>edit</mat-icon>
          <span>{{ 'topic-draft-action-button.edit' | translate }}</span>
        </button>
      </span>
    <span matTooltip="{{ 'topic-draft-action-button.tooltip.only-admin-or-initiator-permission-to-delete' | translate }}" [matTooltipDisabled]="canDeleteTopicDraft()">
      <button mat-menu-item [disabled]="!canDeleteTopicDraft()" (click)="clickedDeleteTopicDraft()">
        <mat-icon>delete</mat-icon>
        <span>{{ 'topic-draft-action-button.delete-text' | translate }}</span>
      </button>
    </span>
    <span matTooltip="{{ 'topic-draft-action-button.tooltip.header' | translate }}">
      <button mat-menu-item (click)="clickedOpenComments()">
        <mat-icon>chat</mat-icon>
        <span>{{ 'topic-draft-action-button.comments-text' | translate }}</span>
      </button>
    </span>
    <span matTooltip="{{ getSubmissionTooltipText$() | async}}" [matTooltipDisabled]="isTopicDraftInSubmissionStage()">
      <button mat-menu-item [disabled]="!isTopicDraftInSubmissionStage()" (click)="submittingTopicDraft()">
        <mat-icon>exposure</mat-icon>
        <span>{{ getSubmissionButtonText$() | async }}</span>
      </button>
    </span>
    <span matTooltip="{{getConvertToTeamTooltipText$() | async}}" [matTooltipDisabled]="isTopicDraftConvertableToTeam()">
        <button mat-menu-item [disabled]="!isTopicDraftConvertableToTeam()" (click)="clickedConvertToTeam()">
          <mat-icon>transform</mat-icon>
          <span>{{ 'topic-draft-action-button.create-team' | translate }}</span>
        </button>
      </span>
    <span matTooltip="{{ getApproveOrRejectTooltipText$() | async}}" [matTooltipDisabled]="isTopicDraftInApprovingStage()">
      <button mat-menu-item [disabled]="!isTopicDraftInApprovingStage()" (click)="approvingTopicDraft()">
        <mat-icon>check_circle</mat-icon>
        <span>{{ getApprovalButtonText$() | async }}</span>
      </button>
    </span>
    <span matTooltip="{{ getApproveOrRejectTooltipText$() | async}}" [matTooltipDisabled]="isTopicDraftInApprovingStage()">
      <button mat-menu-item [disabled]="!isTopicDraftInApprovingStage()" (click)="rejectingTopicDraft()">
        <mat-icon>cancel</mat-icon>
        <span>{{ getRejectionButtonText$() | async }}</span>
      </button>
    </span>
  </mat-menu>
</ng-container>
